<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue</title>
    <script src="./vue.js"></script>
    <style>
        #root {
            width: 500px;
            margin: 200px auto;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="root">
        这瓜你要不要吧？<br>
        <span>{{info}},{{x}}</span><br>
        <button @click='gua'>make your
         choice</button>
        <button @click=isneed=!isneed,x++>make your
         choice(这个直接写在html中)</button><br>
        <span>生瓜蛋子个数为：{{numbers.a}}</span><br>
        <button @click='numbers.a++'>点我增加生瓜蛋子个数</button><br>
        <span>吸铁石个数为：{{numbers.b}}</span><br>
        <button @click='numbers.b++'>点我增加吸铁石个数</button>
    </div>
    <script>
        Vue.config.productionTip = false
        const vm = new Vue({
            el: '#root',
            data: {
                isneed: true,
                x: 1,
                numbers: {
                    a: 1,
                    b: 2
                }
            },
            computed: {
                info() {
                    return this.isneed ? '这瓜要熟我当然要啊' : '喏，吸铁石'
                }
            },
            methods: {
                gua() {
                    this.isneed = !this.isneed
                    this.x++
                }
            },
            watch: { //监视属性，可以监视computed
                isneed: {
                    // handler在isneed变化时被调用
                    immediate: true, //handler初始化时被调用一次
                    handler(newValue, oldValue) {
                        console.log('被修改了' + newValue, oldValue + 'immediate');
                    }
                },
                'numbers.a': { //深度监视，监视多级目录中某个元素变化
                    handler() {
                        console.log('numbers.a深度监视执行了');
                    }
                },
                numbers: {
                    deep: true, //监视所有属性变化，默认为false
                    handler() {
                        console.log('深度监视执行了,deep: true');
                    }
                },
                isneed() { //简写方式
                    console.log('深度监视执行了,--来自简写方式');
                }
            }
        })
        vm.$watch('isneed', { // 写在vm外部的写法
            deep: true,
            handler(newValue, oldValue) {
                console.log('被修改了' + newValue, oldValue + '--来自写在vm外的简写写法');
            }
        })
        vm.$watch('isneed', function(newValue, oldValue) { //写成函数，不能配置项了（深度监视）
            console.log('被修改了' + newValue, oldValue + '--来自写在vm外的简写(写成函数)写法');
        })
    </script>
</body>

</html>